<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  <title>校运动会</title>
   <link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
   <link rel="stylesheet" type="text/css" href="res/css/main.css">
   <link rel="stylesheet" href="res/css/index.css"> 
   <link rel="stylesheet" href="layuiadmin/layui/css/layui.css"> 
   <link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
   <link rel="stylesheet" href="static/css/index.css">
   
   <link rel="stylesheet" type="text/css" href="custom/css/jquery.slider.css" />
	<script type="text/javascript" src="custom/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="custom/js/jquery.slider.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function ($) {
		$(".slider").slideshow({
			width: 332,
			height: 227,
			transition: ['bar', 'Rain', 'square', 'squareRandom', 'explode']
		});
	});
	</script>
   <style type="text/css">
		#test1 {
			width: 100%;
			height: 450px !important;
		}
		
		.info {
			background-color: block;
			height: 50px;
			font-size: 24px;
			line-height: 50px;
			border-bottom: 1px solid #d9d9d9;
		}
		.infomore{
			float:right;
			width:10%;
			height: 50px;
			line-height:50px;
			border-bottom: 1px solid #d9d9d9;
		}
		
		#radius {
			border-radius: 8px 8px 0px 0px;
			background-color: #FCFCFC;
			margin-left: 10px;
		}
		
		#divradius {
			margin: 10px auto
		}
		
		　　#divradius img {
			border-radius: 50%
		}
		
		
		.center{
			text-align:center;
		}
		
		#radius2 img {
			border-radius: 15px;
		}
		
		#yuan{
			float: left;
			border-radius:100%; 
			height: 50px;
			width: 50px; 
			margin-left:10px;
			line-height:50px;
			overflow:hidden;
		}
		
		#yuanagain{
			width:150px;
			height:150px; 
			border-radius:50%; 
			overflow:hidden;
		}
		
		div p a{
		  list-style:none;
		  font-size:12px;
		 /*  width:250px;
		  height:30px; */
		  line-height:30px;
		  padding-left:20px;
		  background:url(res/layui/images/face/65.gif) no-repeat 0px 6px;
		}
</style>
</head>
<body>

	<!-- 导入导航栏 -->
	<div class="layui-container" style="width:100%">
	  	<%@ include file="header.jsp" %> 
  	</div>
  	
    <!-- 轮播 -->
    <div class="layui-carousel" id="test1">
	  <div carousel-item style="height:500px;">
	    <div>
			<img alt="" src="res/img/bj1.jpg" height="500px" width=100%>
		</div>
	    <div>
			<img alt="" src="res/img/bj2.jpg" height="500px" width=100%>
		</div>
	    <div>
			<img alt="" src="res/img/bj3.jpg" height="500px" width=100%>
		</div>
	    <div>
			<img alt="" src="res/img/bj4.jpg" height="500px" width=100%>
		</div>
	    <div>
			<img alt="" src="res/img/bj5.jpg" height="500px" width=100%>
		</div>
	  </div>
	</div>
	
	<!-- 首页赛事安排循环开始 -->
	<div class="main-product">
    <div class="layui-container">
      <div class="title" style="font-size: 23px; text-align: center;margin: 20px 0px 40px 0px;">近期赛程展示
      	<a href="arrange.action"><span style="font-size: 18px;color: black;">更多>>></span></a>
      </div>
      <div class="layui-row layui-col-space25">
        <c:forEach items="${arrangelist }" var="obj" begin="0" end="3" step="1">
	        <div class="layui-col-sm6 layui-col-md3">
	          <div class="content">
	            <div><img style="height: 150px;width: 190px;" src="${obj.photonote }"></div>
	            <div>
	              <p class="label">${obj.projectname }</p>
	              <p>${obj.note }</p>
	            </div>
	            <a href="oneArrange.action?arrangeid=${obj.arrangeid }">查看详情 ></a>
	          </div>
	        </div>
        </c:forEach>
      </div>
    </div>
  </div>
  <!-- 首页赛事安排循环开始 -->
	
  <!-- 卡片信息 -->
  <div class="content" style="margin-top: -160px;">
    <div class="cont w1100">
      <div class="list-item">
        <div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                <div class="info" style="border-bottom: 2px solid #4A708B">信息栏</div>
              </div>
            </div>
           </div>
        </div>
        <div class="item">
          <div class="layui-fluid">
            <div class="layui-row">
              
              <div class="layui-col-xs8 layui-col-sm8 layui-col-md8">
                <div class="layui-card">
			   		<div class="layui-card-header" id="radius">
			   		    <div style="float:left">公告通知</div>
			   		     <div style="float:right;color:#ccd9ff"><a href="noticelist.action">MORE>>></a></div>
				   	</div>
			   		<div class="layui-card-body">
				   		<c:forEach items="${noticelist }" var="noticelist" begin="0" end="9" step="1">
							<div class="navMenus">
						        <div>
						        <p class="first" style="border-bottom: 1px solid #C9C9C9;">
						        	<a href="noticecontent.action?noticeid=${noticelist.noticeid }">【${noticelist.title }】</a>
						        	<span style="float: right;">发布时间：${noticelist.releasetime }</span>
						        </p>
						        </div>
				        	</div>
			        	</c:forEach>
					</div>
			   	</div>
              </div>
              
              <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                <div class="layui-card">
			   		<div class="layui-card-header" id="radius">
			   		    <div style="float:left;text-align:center;">精彩加油稿推送</div>
			   		     <div style="float:right;color:#ccd9ff"><a href="oilingshow.action">MORE>>></a></div>
				   	</div>
			   		<div class="layui-card-body">
				   		<c:forEach items="${oilinglist }" var="oilinglist" begin="0" end="9" step="1">
							<div class="navMenus">
						        <div>
						        <p class="first" style="border-bottom: 1px solid #C9C9C9;">
						        	<a href="oneoilingshow.action?oilingid=${oilinglist.oilingid}">&nbsp;&nbsp;&nbsp;【${oilinglist.oilingtitle }】<span style="float: right;">发布者：${oilinglist.username }</span></a>
						        </p>  
						        </div>
				        	</div>
			        	</c:forEach>
					</div>
			   	</div>
              </div>
            </div>
           </div>
           
          
           <div class="layui-col-md12" style="margin-top: 10px;margin-bottom: 10px;">
		      <div class="layui-card">
		        <div class="layui-card-header" class="info" style="border-bottom: 2px solid #4A708B;font-size: 20px;">新闻资讯
		        	 <div class="infomore" style="border-color: #FFFFFF;font-size: 14px;"><a href="morenew.action">MORE>>></a></div>
		        </div>
		        <div class="layui-card-body">
		        	<div class="layui-row layui-col-space5">
					    <div class="layui-col-md4">
						    <div>
								<div class="slider">
									<div><a href="#"><img src="custom/images/lb1.jpg"></a></div>
									<div><a href="#"><img src="custom/images/lb5.jpg"></a></div>
									<div><a href="#"><img src="custom/images/lb6.jpg"></a></div>
									<div><a href="#"><img src="custom/images/lb4.jpg"></a></div>
									<div><a href="#"><img src="custom/images/lb5.jpg"></a></div>
									<div><a href="#"><img src="custom/images/lb6.jpg"></a></div>      
									<div><a href="#"><img src="custom/images/lb7.jpg"></a></div>
								</div>
							</div>
					    </div>
					    <c:forEach items="${newnlist }" var="newnlist" begin="0" end="7" step="1">
						    <div class="layui-col-md8">
						      <div class="grid-demo" style="border-bottom: 1px dashed #C9C9C9;width: 92%">&nbsp;&nbsp;&nbsp;<a href="newcontent.action?noticeid=${newnlist.noticeid}">${newnlist.title }</a><p style="float: right;">${newnlist.releasetime }</p></div>
						    </div>
					    </c:forEach>
				   </div>
		        </div>
		      </div>
		   </div>
           
           
        </div>
      </div>
    </div>
    
    <!-- 项目展示 -->
    <div class="cont w1100">
    	<div class="list-item">
	        <div class="item">
	          <div class="layui-fluid">
	            <div class="layui-row">
	              <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
	                    <div class="info" style="float:left;width:90%;border-bottom: 2px solid #4A708B">项目展示</div>
			   		    <div class="infomore" style="border-bottom: 2px solid #4A708B"><a href="moreproject.action">MORE>>></a></div>
	              </div>
	            </div>
	          </div>
	         </div>
			<div class="layui-fluid">
				<div class="layui-row">
				<c:forEach items="${projectlist }" var="obj" begin="0" end="5" step="1">
					<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
						<div class="layui-card">
					   		<div class="layui-card-body">
					   			<div id="yuanagain">
						   			<a href="projectdetail.action?projectid=${obj.projectid }">
										<img alt="" src="${obj.note }" height="150px" width=100%>
									 </a>
								</div>
							</div>
					   		<a href="projectdetail.action?projectid=${obj.projectid }"><div class="layui-card-footr center">${obj.projectname }</div></a>
					   	</div>
					</div>
				</c:forEach>
				</div>
			</div>
		</div>
    </div>
    <br><br><br>
    
      <!-- 精彩集锦 -->
    <div class="cont w1100">
    	<div class="list-item">
	        <div class="item">
	          <div class="layui-fluid">
	            <div class="layui-row">
	              <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
	                	  <div class="info" style="float:left;width:90%;border-bottom: 2px solid #4A708B;">精彩集锦</div>
			   		      <div class="infomore" style="border-bottom: 2px solid #4A708B"><a href="moremar.jsp"></a></div>
	              </div>
	            </div>
	          </div>
	         </div>
			<div class="layui-fluid">
				<div class="layui-row">
					<c:forEach items="${noticehotlist }" var="noticehotlist" begin="0" end="3" step="1">
						<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
							<div class="layui-card">
						   		<div class="layui-card-body" id="radius2">
									<a href="newcontent.action?noticeid=${noticehotlist.noticeid}">
										<img alt="" src="${noticehotlist.note}" height="200px" width=100%>
									</a>
								</div>
						   		<div class="layui-card-footr center" >
						   			<div id="yuan">
										<img  src="${noticehotlist.note}" style="height: 50px;width: 50px;" />					
									</div>
									<div style="line-height:50px;text-align:left;margin: 5px auto;">
										<a href="newcontent.action?noticeid=${noticehotlist.noticeid}">
										<b>${noticehotlist.getTitleIntercept() }&nbsp;&nbsp;&nbsp;&nbsp;</b>||&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #FF4500">热度：${noticehotlist.visitornum }</span>
										</a>
									</div>
						   		</div>
						   	</div>
						</div>
					</c:forEach>
					
				</div>
			</div>
		</div>
    </div>
  </div>

  <!-- footer部分 -->
	<div class="layui-container" style="width:100%">
	  	<%@ include file="footer.jsp" %> 
  	</div>
<script src="res/layui/layui.js"></script>
<script src="layuiadmin/layui/layui.js"></script>

<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
  
  //建造实例
  carousel.render({
    elem: '#test2'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
  
});
</script>
<script>
   layui.config({
      base: 'res/js/util/'
    }).use(['element','laypage','jquery','menu'],function(){
      element = layui.element,laypage = layui.laypage,$ = layui.$,menu = layui.menu;
      laypage.render({
        elem: 'demo'
        ,count: 70 //数据总数，从服务端得到
      });
      menu.init();
    })
</script>
<script>
layui.use('table', function(){
  var table = layui.table;
 
  //图片轮播
  carousel.render({
    elem: '#test1'
    ,width: '778px'
    ,height: '440px'
    ,interval: 5000
  });
 
 });
</script>
</body>
</html>
